<template>
  <basic-container class="logcongtainer">
    <div class="filter_container">
      <el-form :inline="true" :model="logform" class="demo-form-inline">
        <el-form-item label="操作用户">
          <el-input v-model.trim="logform.userName" size="small" clearable placeholder="请输入操作用户"></el-input>
        </el-form-item>
        <el-form-item label="操作模块">
          <el-select v-model="moduleName" placeholder="请选择商品状态" size="small" @change="getOperationmodul">
            <el-option v-for="item in operationModuleList" :key="item.dictKey" :label="item.dictValue" :value="{value:item.dictKey,label:item.dictValue}" />
          </el-select>
        </el-form-item>
        <el-form-item label="操作时间:">
          <el-date-picker v-model="Launchdate" type="datetimerange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" size='small' :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm" :clearable="false" align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="操作类型">
          <el-select v-model="typeName" placeholder="请选择商品状态" size="small" @change="getOperationtype">
            <el-option v-for="item in operationTypeList" :key="item.dictKey" :label="item.dictValue" :value="{value:item.dictKey,label:item.dictValue}" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="handleFilterlogform(Launchdate)" icon="el-icon-search" size="small">查询</el-button>
          <el-button type="success" plain size="small" icon="el-icon-download" @click="handleExportlog(Launchdate,logform)">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :key="tableKey" class='table_list' :data="logList" border="" fit style="width: 100%;">
      <el-table-column label="操作时间" prop align="center" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <span>{{ row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作用户" prop align="center" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <span>{{ row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作角色" prop align="center" :show-overflow-tooltip="true" width='200px'>
        <template slot-scope="{row}">
          <span>{{ row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作模块" prop align="center" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <span>{{ row.operationModularName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作类型" align="center" width='120px' prop="goodsState" :show-overflow-tooltip="true">
        <template slot-scope="{row}">
          <span>{{ row.operationTypeName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作内容" prop align="center" :show-overflow-tooltip="true">

        <template slot-scope="scope">
          <span>{{ scope.row.operationContent}}</span>
          <br>
          <i class="el-icon-view" @mouseenter="enterColor(scope.$index, scope.row)" @mouseleave="leaveColor(scope.$index, scope.row)"
            :class="scope.$index == Flag ? 'active':'buttoncolor'" style="cursor: pointer!important;" @click="handleViewLog(scope.$index, scope.row)"
            v-if="scope.row.operationType==4">&nbsp;明细</i>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="logform.page" :limit.sync="logform.size" layout="sizes,prev, pager, next,total"
      @pagination="getlogList" />
    <el-dialog title="明细内容" :visible.sync="logdialogVisible" center width='50%'>
      <p v-html="operationJsonContent">{{operationJsonContent}}</p>
    </el-dialog>
  </basic-container>
</template>

<script>
  import Pagination from "@/components/Pagination"; //分页
  import {
    getLoglist,
    operationmodular,
    operationtype
  } from "@/api/logs";
  export default {
    components: {
      Pagination
    },
    data() {
      return {
        logform: {
          userName: '', //用户名称
          operationModularId: '', // 操作模块id
          // module: '', //模块
          operationType: '', //类型
          startTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD 00:00:00")
            .toString(), //配送开始时间
          endTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD 23:59:59")
            .toString(), //配送结束时间
          page: 1,
          size: 10
        },
        logList: [],
        tableKey: 0,
        total: 0,
        listLoading: false,
        moduleName: '',
        typeName: '',
        operationModuleList: [

        ], //操作模块
        Launchdate: [
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD 00:00:00")
          .toString(),
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD 23:59:59")
          .toString(),
        ],
        operationTypeList: [], //操作类型
        Flag: false,
        logdialogVisible: false,
        operationJsonContent: '',

      }
    },
    mounted() {
      this.getlogList();
      this.getOperationmodulist();
      this.getOperationtypelist();
    },
    methods: {
      //操作模块列表
      getOperationmodulist() {
        operationmodular().then(res => {
          this.operationModuleList = res.data.data;
          this.moduleName = res.data.data[0].dictValue
          this.logform.operationModularId = res.data.data[0].dictKey;
        })
      },
      getOperationmodul(data) {
        if (data) {
          this.moduleName = data.label
          this.logform.operationModularId = data.value
        }
      },
      // 操作类型类别
      getOperationtypelist() {
        operationtype().then(res => {
          this.operationTypeList = res.data.data;
          this.typeName = res.data.data[0].dictValue
          this.logform.operationType = res.data.data[0].dictKey;
        })
      },
      getOperationtype(data) {
        if (data) {
          this.typeName = data.label
          this.logform.operationType = data.value
        }
      },

      // 列表
      getlogList() {
        this.listLoading = true;
        getLoglist(this.logform).then(res => {
          this.logList = res.data.data.rows;
          this.total = res.data.data.total;
          setTimeout(() => {
            this.listLoading = false;
          }, 1.5 * 1000);
        })
      },
      //查询
      handleFilterlogform(times) {
        this.logform.page = 1;
        if (times) {
          this.logform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD HH:mm:00")
            .toString();
          this.logform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD HH:mm:59")
            .toString();
        }
        var time1 = Date.parse(this.logform.startTime);
        var time2 = Date.parse(this.logform.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount >= 31) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          this.getlogList();
        }
      },
      //导出
      handleExportlog(times, item) {
        console.log(item, 'item')
        if (times) {
          this.logform.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD HH:mm:00")
            .toString();
          this.logform.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD HH:mm:59")
            .toString();
        }
        var time1 = Date.parse(this.logform.startTime);
        var time2 = Date.parse(this.logform.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount >= 31) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          var user = JSON.parse(localStorage.getItem('saber-userInfo'));
          window.open(
            `/api/xmbz-system/userOperationLog/exportSystemLog?userName=${item.userName}&operationModularId=${item.operationModularId}&operationType=${item.operationType}&startTime=${this.logform.startTime}&endTime=${this.logform.endTime}&blade-auth=bearer ${user['content'].accessToken}
            `
          )
          console.log(
            `/api/xmbz-system/userOperationLog/exportSystemLog?userName=${item.userName}&operationModularId=${item.operationModularId}&operationType=${item.operationType}&startTime=${this.logform.startTime}&endTime=${this.logform.endTime}&blade-auth=bearer ${user['content'].accessToken}
                `
          )

        }


      },
      // 操作按钮划进
      enterColor(index, row) {
        this.Flag = index;
      },
      // 操作按钮划出
      leaveColor(index, row) {
        this.Flag = null;
      },
      handleViewLog(index, rows) {
        this.operationJsonContent = rows.operationJsonContent;
        this.logdialogVisible = true;

      },


    }
  }
</script>

<style lang="scss" scoped>
  .red {
    color: #FF0000;
  }

  .logcongtainer {

    .filter_container {
      .rows {
        display: flex;
        justify-content: space-between;
      }

      .el-form-item {
        margin-bottom: 22px !important;
      }

      .lows {
        display: flex;
        justify-content: flex-end;
      }

      .addshop {
        position: relative;

        .showbutton {
          position: absolute;
          width: 90px;
          color: #409eff;
          border: 1px solid #b3d8ff;
          background: #fff;
          text-align: center;
          box-sizing: border-box;
          outline: none;
          font-weight: 500;
          padding: 12px 20px;
          font-size: 12px;
          border-radius: 3px;
          z-index: 999;
          top: 34px;
        }
      }
    }

    .table_list {
      .warning-row {
        background: #fdf5e6;
        color: #e6a23c;
      }

      .active {
        color: #409eff;
      }

      .buttoncolor {
        color: #000;
      }

    }

  }
</style>
